<!DOCTYPE html>
<html>
<head>
    <title>yl</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&ak=101a124f65cb0122fdc49036fe924f42"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style type="text/css">
        body, html, #allmap
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
        #map
        {
            height: 100%;
            width: 100%;
            float: left;
            border-right: 2px solid #bcbcbc;
            z-index: 1;
        }
        #tips
        {
            position: fixed;
            height: 20px;
            width: 100px;
            left: 10px;
            top: 10px;
            z-index: 200;
            background-color: #68c212;
            font-size: 20;
            color: #FFFFFF;
            visibility: visible;
        }
    </style>
</head>
<body>
    <!--<span id="tips">右击添加标记</span>-->
    <div id="tips">
        右击添加标记
    </div>
    <div id="map">
    </div>
</body>
</html>
<script type="text/javascript">

    //initMapByPoint("26.065828", "119.311582");
    //initMapByProjection("13283923.99", "2985986.03");
    var map = new BMap.Map("map");            // 创建Map实例
    function initMap() {
        map.enableScrollWheelZoom();                            //启用滚轮放大缩小
        initContextMenu(map);
        //添加放大缩小按钮
        var ctl = new BMap.NavigationControl(
        { anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_ZOOM });
        ctl.setOffset(new BMap.Size(10, 40));
        map.addControl(ctl);
        return map;
    }
    function initMapByProjection(x, y) {
        var map = initMap(map);
        var projection = map.getMapType().getProjection();
        var point = projection.pointToLngLat(new BMap.Pixel(x, y));
        map.centerAndZoom(point, 15);
    }
    function initMapByPoint(lat, lang) {
        var map = initMap(map);
        var point = new BMap.Point(lang, lat);
        map.centerAndZoom(point, 15);
    }
    function centerAndZoom(lat, lang) {
        var point = new BMap.Point(lang, lat);
        map.centerAndZoom(point, 15);
    }
    function initContextMenu(map) {
        var contextMenu = new BMap.ContextMenu();
        var txtMenuItem = [
          {
              text: '放大',
              callback: function () { map.zoomIn() }
          },
          {
              text: '缩小',
              callback: function () { map.zoomOut() }
          },
          {
              text: '在此添加标注',
              callback: function (p) {
                  var marker = new BMap.Marker(p), px = map.pointToPixel(p);
                  map.addOverlay(marker);
                  marker.enableDragging();
              }
          }
         ];
        for (var i = 0; i < txtMenuItem.length; i++) {
            contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
            if (i == 1 || i == 3) {
                contextMenu.addSeparator();
            }
        }
        map.addContextMenu(contextMenu);
    }
    function makeMaker() {
        var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>FFCS</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='logo.jpg' width='139' height='104' title='天安门'/>"
;
        var point = new BMap.Point(116.404, 39.915);
        var marker = new BMap.Marker(point);
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
        map.centerAndZoom(point, 15);
        map.addOverlay(marker);
        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
            //图片加载完毕重绘infowindow
            document.getElementById('imgDemo').onload = function () {
                infoWindow.redraw();
            }
        });
        marker.enableDragging();
    }
    function getLatLng() {
        return lat.value + "|" + lng.value;
    };
    function setLatLng(latv, lngv) {
        lat.value = latv;
        lng.value = lngv;
    };
    function setCity(name) {

        map.setCenter(name);
    }
</script>
